/**
父级路由
 */
<template>
  <div class="nav" id="nav" :class="showNav?'':'active_nav'">
      <div class="nav_container">
        <a @click="back">
          <img class="nav_container_img" src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg" alt="">
        </a>
        <div class="navbar">
          <!-- 左边 -->
          <div class="navbar_list_left" >
            <div  class="navbar_list_left_item" 
                  v-for="(item, index) in lists" 
                  :key="index"
                  @click="itemClick(index)"
                  >
              <router-link :to="item.path"  :class="{active: isActive === index}">{{item.name}}</router-link>
            </div>
            <!-- <div class="navbar_list_left_item"><a href="/#">沸点</a></div>
            <div class="navbar_list_left_item"><a href="/#">课程</a></div>
            <div class="navbar_list_left_item"><a href="/#">直播</a></div>
            <div class="navbar_list_left_item"><a href="/#">活动</a></div> -->
            <div class="navbar_list_left_item"><a target="blank" href="https://detail.youzan.com/show/goods/newest?kdt_id=104340304">商城</a></div>
            <div class="navbar_list_left_item"><a target="blank" href="https://juejin.cn/app?utm_source=jj_nav">APP</a></div>
            <div class="navbar_list_left_item"><a target="blank" href="https://juejin.cn/extension?utm_source=jj_nav">插件</a></div>
          </div>
          <!-- 右边 -->
          <div class="navbar_list_right">
            <div class="navbar_list_right_search">
              <div class="navbar_list_right_search_div" :class="showAdd?'':'active_input'">
                  <div class="navbar_list_right_search_div_form" :class="showAdd?'':'active_input'">
                    <input  placeholder="探索稀土掘金"
                            @focus="handleFocus"
                            @blur="handleBlur"/>
                    <div class="navbar_list_right_search_div_form_icon">
                      <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/1e8ab9a22f0ddc36349f60b38900d0bd.svg" alt="">
                    </div>
                  </div>
                  <!-- 搜索历史框 -->
                  <div class="navbar_list_right_search_div_typeHead" v-show="!showAdd" >
                    <div class="navbar_list_right_search_div_typeHead_title">
                      <div>搜索历史</div>
                      <div style="color:#1e80ff; cursor:pointer;">清空</div>
                    </div>
                    <div class="navbar_list_right_search_div_typeHead_list">
                      <div>学习html+css+javascript</div>
                      <div>学习vue vueX vueRouter</div>
                      <div>掌握React</div>
                    </div>
                  </div>
              </div>
              <div class="navbar_list_right_search_add" v-show="showAdd">
                <div class="navbar_list_right_search_add_item">
                    <el-dropdown  size="small" split-button type="primary">
                      创作者中心
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item><i class="el-icon-edit"></i>写文章</el-dropdown-item>
                        <el-dropdown-item><i class="el-icon-odometer"></i>发沸点</el-dropdown-item>
                        <el-dropdown-item><i class="el-icon-lollipop"></i>写代码</el-dropdown-item> 
                      </el-dropdown-menu>
                    </el-dropdown>
                </div>
              </div>  
            </div>
            <div class="navbar_list_right_item">
              <div class="navbar_list_right_item_text" onclick="window.open('https://juejin.cn/vip?utm_source=web_nav')">
                <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/24127194d5b158d7eaf8f09a256c5d01.svg" alt="">
                <div>会员</div>
              </div>
              <div class="navbar_list_right_item_icon">
                <i class="navbar_list_right_item_icon_count">2</i>
                <a href="https://juejin.cn/notification">
                  <i class="el-icon-message-solid">
                  </i>
                </a>
                </div>
              <div class="navbar_list_right_item_touxiang">
                <el-dropdown>
                  <span class="el-dropdown-link">
                    <img src="https://p6-passport.byteacctimg.com/img/user-avatar/4dc7a8e7c4eff9e00a99a907f23bc1d1~300x300.image" alt="">
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item><i class="el-icon-edit"></i> 写文章</el-dropdown-item>
                    <el-dropdown-item><i class="el-icon-s-release"></i> 草稿箱</el-dropdown-item>
                    <el-dropdown-item divided><i class="el-icon-s-custom"></i> 我的主页</el-dropdown-item>
                    <el-dropdown-item><i class="el-icon-star-off"></i> 我赞过的</el-dropdown-item>
                    <el-dropdown-item><i class="el-icon-s-management"></i> 我的课程</el-dropdown-item>
                    <el-dropdown-item><i class="el-icon-toilet-paper"></i> 我的优惠卷</el-dropdown-item>
                    <el-dropdown-item><i class="el-icon-platform-eleme"></i> 掘金会员</el-dropdown-item>
                    <el-dropdown-item><i class="el-icon-star-on"></i> 成长福利</el-dropdown-item>
                    <el-dropdown-item><i class="el-icon-success"></i> 标签管理</el-dropdown-item>
                    <el-dropdown-item><i class="el-icon-search"></i> 浏览记录</el-dropdown-item>
                    <el-dropdown-item><i class="el-icon-s-flag"></i> 我的报名</el-dropdown-item>
                    <el-dropdown-item divided><i class="el-icon-open"></i> 设置</el-dropdown-item>
                    <el-dropdown-item><i class="el-icon-share"></i> 关于</el-dropdown-item>
                    <el-dropdown-item divided><i class="el-icon-position"></i> 退出</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>   
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name:'NavBar',
  setup() {
    
  },
  mounted() {
    window.addEventListener('scroll',this.handleScroll)
  },
  data(){
    return {
      // lists: ['首页','沸点','课程','直播','活动']
      lists: [
        {name:'首页', path:'/'},
        {name:'沸点', path:'/boilingpoint'},
        {name:'课程', path:'/course'},
        {name:'直播', path:'/live'},
        {name:'活动', path:'/activity'},
      ],
      isActive: 0,
      showAdd: true,
      showNav: true,
    }
  },
  methods: {
    back() {
      this.$router.push('/')
    },
    itemClick(i) {
      this.isActive = i;
    },
    handleFocus() {
      this.showAdd = false
    },
    handleBlur() {
      this.showAdd = true
    },
    handleScroll() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      // console.log(scrollTop)
      // let offsetTop = document.querySelector('#nav').offsetTop
      // console.log(offsetTop)
      if (scrollTop > 400) {
        this.showNav = false
      } else {
        this.showNav = true
      }

    }
  },
    destroyed () {
      window.removeEventListener('scroll', this.handleScroll)
    }
  }

</script>

<style scoped lang="scss">
.active {
  color: #1e80ff;
}

.nav {
  width: 100%;
  height: 61px;
  border-bottom: 2px solid #f1f1f1;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 250;
  &_container {
    width: 1440px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    a {
      margin: 0 12px 0 24px;
      &:hover {
        cursor: pointer;
      }
    }
    &_img {
      width: 107px;
      height: 22px;
    }
  }
}
.navbar{
  height: 100%;
  width: 1297px;
  display: flex;
  justify-content: space-between;
  &_list_left {
    display: flex;
    &_item {
      font-size: 14px;
      height: 100%;
      width: 52px;
      a {
        margin: 0 10px;
        display: inline-block;
        line-height: 60px;
        &:hover {
          border-bottom: 1px solid #1e80ff;
        }
      }
    }
  }

  &_list_right {
    display: flex;
    &_search {
      width: 514px;
      display: flex;
      align-content: center;
      &_div {
        position: relative;
        padding-right: 12px;
        width: 374px;
        display: flex;
        align-items: center;
        &_form {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 362px;
          height: 36px;
          border: 1px solid #c2c8d1;
          border-radius: 4px;
          line-height: 36px;
          transition: width .3s linear;
          &:hover {
            border: 1px solid #8a919f;
          }
          input::-webkit-input-placeholder {
            color: #8a919f;
          }
          input {
            width: 80%;
            outline: none;
            border: none;
            padding-left: 12px;
            font-size: 13px;
            color: #8a919f;
            background-color: transparent;
          }
          &_icon {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 44px;
            height: 30px;
            background: #f2f3f5;
            border-radius: 3px;
            margin: 0 2px;
            img {
              width: 16px;
              height: 16px;
            }
            
          }
        }
        &_typeHead {
          position: absolute;
          width: 490px;
          /* height: 255px; */
          transition: width .3s linear;
          z-index: 1000;
          font-size: 12px;
          text-align: left;
          border-radius: 10px;
          box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
          background-color: #fff ;
          border: 1px solid #f1f1f1;
          top:50px;
          &_title {
            color:#869aab;
            display: flex;
            height: 37px;
            width: 100%;
            align-items: center;
            justify-content: space-between;
            padding: 6px 12px;
            border-bottom: 1px solid #f1f1f1;
            div {
              text-align: center;
            }
          }
          &_list {
            cursor:pointer;
            line-height: 20px;
            div{
              padding: 7px 10px;
              &:hover{
                background-color: #f2f3f5;
              }
            }
          }
        }
      }
      &_add {
          height: 100%;
          display: flex;
          align-items: center;
          padding-left: 5px;
          &_item {
            width: 120px;
            height: 36px;
          }
        }
      
    }
    &_item {
      display: flex;
      font-size: 14px;
      align-items: center;
      &_text {
        cursor:pointer;
        display: flex;
        padding-left: 12px;
        img {
          height: 24px;
          width: 24px;
          margin-right: 3px;
        }
        div {
          width: 28px;
          height: 24px;
          line-height: 24px;
        }
      }
      &_icon {
        position: relative;
        a {
          i{
            
            font-size: 22px;
            line-height: 60px;
          }
        }
        &_count {
              position:absolute;
              top: 10px;
              left: 39px;
              text-align: center;
              font-style: normal;
              font-size: 1px;
              width: 12px;
              height: 12px;
              line-height: 12px;
              color: #fff;
              border-radius: 45%;
              background-color: #e60012;
              /* 111111111111111111111111111 */
            }
      }
      &_touxiang{
        display: flex;
        align-items: center;
        margin-right: 24px;
        margin-left: 12px;
        img {
          border-radius: 50px;
          width: 36px;
          height: 36px;
        }
      }
    }
  }
}

.active_input {
  width: 500px;
  transition: width .3s linear;
  .navbar_list_right_search_div_form {
    border: 1px solid #1e80ff;
    &_icon {
      background-color:#eaf2ff;
    }
  }
}

.active_nav {
  display: none;
  height: 0;
}
</style>
